<template>
  <div class="chart-box" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    height: {
      type: String,
      default: '500px'
    },
    list: {
      type: Array
    }
  },
  methods: {
    renderChart(list) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart)
      const _list = JSON.parse(JSON.stringify(list))
      _list.sort((v1, v2) => {
        return v1.count - v2.count
      })
      // 获取数据
      const yAxisData = _list.map(v => {
        return v.name
      })
      const seriesData = _list.map(v => {
        return v.count
      })
      const option = {
        title: {
          text: '抽中比例',
          subtext: '数据来自实际测试'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['9月份']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: yAxisData
        },
        series: [
          {
            name: '8月份',
            type: 'bar',
            data: seriesData
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style>
.chart-box {
  height: 1800px;
}
</style>
